<template>
	<view class="checkbox-wrap"  @click="checkChange">
		<view class="checkbox" :class="[modelValue?'checked':'',disabled?'disabled':'']" :style="{'background':modelValue?color:'#fff','border':`1rpx solid ${modelValue?color:'#d1d1d1'}`}"></view>
		<view class="label" :class="[disabled?'disabled':'']">
			<slot name="label"></slot>
		</view>
	</view>
</template>

<script setup lang="ts" name='Picker'>
  const props =	defineProps({
		modelValue:{
			type:[Boolean,Number,String],
			default:false
		},
		color:{
			type:[String],
			default:'#409eff'
		},
		disabled:{
			type:[Boolean,String],
			default:false
		}})
	const emits = defineEmits(['update:modelValue'])
	
	
	const checkChange = () => {
	    emits('update:modelValue', !props.modelValue)
    }
</script>

<style lang="scss" scoped>
.checkbox-wrap{
	display:inline-flex;
	.checkbox{
		width:32rpx;
		height:32rpx;
		border-radius:6rpx;
		outline: 0;
		border: 1rpx solid #d1d1d1;
		background-color: #fff;
		position: relative;
		&.checked{
			background:#409eff;
			border: 1rpx solid #409eff;
			&::after{
				content: "﹁";
				font-size: 28rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				color:#fff;
				transform: translate(-30%,-50%) rotate(130deg);
			}
		}
		&.disabled{
			background:#edf2fc!important;
			border:1rpx solid #dcdfe6!important;
			&.checked{
			   &::after{
			   	color:#c0c4cc;
			   }
			}
		}
	}
	.label{
		width:auto!important;
		margin-left:10rpx;
		color:#333;
		&.disabled{
			color:#c0c4cc;
		}
	}
}
</style>